import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:ycbl/config/bl_color.dart';
import 'package:ycbl/config/bl_style.dart';
import 'package:ycbl/config/route_manager.dart';
import 'package:ycbl/ext/common_ext.dart';
import 'package:ycbl/model/my_course_model.dart';
import 'package:ycbl/page/learn/learn_course_detail_page.dart';
import 'package:ycbl/widget/bl_round_avatar.dart';

import 'bl_shadow_layout.dart';
import 'border_label.dart';

/// 我的课程 item （ListView 的 item 都应该是 StatelessWidget 的）
class MyCourseItem extends StatelessWidget {

  final MyCourseEntity myCourseEntity;

  const MyCourseItem({Key key, this.myCourseEntity, }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(16, 8, 16, 16),
      child: BLShadowLayout(
        child: GestureDetector(
          child: Container(
            color: BLColor.whiteColor,
            padding: EdgeInsets.only(left: 16, right: 16),
            height: 145, // 高度固定的话，好像滑动更流畅些，如果可以的话，应该设置给 ListView 的 itemExtent

            child: Stack(
              alignment: Alignment.centerRight,
              children: [
                // 课程数据
                Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // 标签 + 标题 行
                    Row(
                      children: [
                        BorderLabel(
                          text: myCourseEntity.kemu ?? '未知',
                        ),
                        SizedBox(width: 5,),
                        Expanded(
                          child: Text(
                            myCourseEntity.className,
                            style: BLStyle.commonBlackTextStyle.wrapHeight(),
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                        )
                      ],
                    ),

                    // 上课日期 + 课时 行
                    Padding(
                      padding: EdgeInsets.only(top: 10, bottom: 10),
                      child: Text(
                        myCourseEntity.subDesc,
                        style: BLStyle.smallTextStyle.wrapHeight(),
                      ),
                    ),

                    // 老师头像 + 名称 行
                    Row(
                      children: [
                        BLRoundAvatar(size: 30, url: myCourseEntity.teacherPic,),
                        SizedBox(width: 5,),
                        Text(myCourseEntity.teacherName, style: BLStyle.smallTextStyle,),
                      ],
                    ),
                    //间距
                    SizedBox(height: 10,),
                    // 报名人数 行
                    Text(myCourseEntity.studentNum == null ? '已报名' : '${myCourseEntity.studentNum}人已报名', style: BLStyle.smallGreyTextStyle,),
                  ],
                ),

                //进度条 + 进度数
                Stack(
                  alignment: Alignment.center,
                  children: [
                    SizedBox(
                      width: 50,
                      height: 50,
                      child: CircularProgressIndicator(
                        backgroundColor: Color(0xFFFFDFCD),
                        valueColor: AlwaysStoppedAnimation(Colors.orange),
                        strokeWidth: 2,
                        value: myCourseEntity.progress(),
                      ),
                    ),

                    Text(
                      '${myCourseEntity.progress().toInt()}%',
                      style: TextStyle(color: Colors.orange, fontSize: 15),
                    ),
                  ],
                )
              ],
            ),
          ),
          onTap: () {
            Navigator.of(context).pushNamed(
              BLRouteName.learn_course_detail,
              arguments: LearnCourseParams(myCourseEntity.mainId, myCourseEntity.myCourseType),
            );
          },
        ),
      ),
    );
  }
}
